<template>
  <view class="container">
    <navbar title="司机详情"></navbar>
    <view class="header">
      <image src="/static/images/Rectangle715@2x.png" mode=""></image>
      <view class="people-info">
        <text class="username">{{driverDetail.nickname || '司机'}}</text>
        <text>驾龄{{driverDetail.driverAge}}年</text>
        <text>联系电话：{{driverDetail.phone}}</text>
      </view>
    </view>
    <view class="body">
      <view class="tip">个人介绍 </view>
      <view class="main" style="color: #666;">
        {{driverDetail.remark || '暂无'}}
      </view>
    </view>
    <view class="footer-button">
      <FooterBottom v-if="isShowPhone" :title="driverDetail.phone"></FooterBottom>
      <FooterBottom v-else @onclick="onClickContact" title="解锁电话"></FooterBottom>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isShowPhone: false,
        driverDetail: {
          phone: ''
        },
        targetUserId: ''
      };
    },
    onLoad({
      targetUserId,
      isback
    }) {
      if (isback) {
        this.isback = isback
      }
      if (targetUserId) {
        this.targetUserId = targetUserId
        this.getDriverDetail(targetUserId)
      }
    },
    methods: {
      // 得到司机详细信息
      async getDriverDetail(targetUserId) {
        const res = await uni.gRequest.get(`/app/user/driver`, {
          id: targetUserId
        })
        this.driverDetail = res.data
        this.isShowPhone = res.data.showFlag == 1
        // this.isShowPhone = /[\d]/.test(this.driverDetail.phone.slice(5, 6))
        // this.driverDetail.phone2 = this.driverDetail.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
      },
      // 点击电话联系
      onClickContact() {
        uni.showModal({
          title: '温馨提示',
          content: '获得联系方式需要付费解锁哦~',
          cancelColor: '#666666',
          confirmText: '立即付费',
          confirmColor: '#FC470F',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: '/pages/order_pay/order_pay?targetUserId=' + this.targetUserId
              })
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .container {
    padding: 0 30rpx;
    background: linear-gradient(154deg, #FFCCBB 0%, #FFFFFF 49%);
  }

  .header {
    // height: 430rpx;
    margin-top: 180rpx;
    display: flex;
    align-items: center;
    padding: 30rpx;
    background-color: #fff;
    border-radius: 10rpx;

    image {
      width: 187rpx;
      height: 180rpx;
    }

    .people-info {
      margin-left: 30rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 22rpx;
      color: #000000;

      text {
        margin-top: 40rpx;
      }

      .username {
        font-weight: 500;
        font-size: 28rpx;
        margin-top: 0;
      }

    }
  }

  .body {
    .tip {
      margin: 20rpx 0;
      font-weight: 500;
      font-size: 28rpx;
      color: #000000;
    }

    .main {
      background: #FFFFFF;
      box-shadow: 0rpx 1rpx 20rpx 0rpx rgba(182, 182, 182, 0.15);
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      padding: 30rpx;
      font-size: 26rpx;
      color: #000000;
      line-height: 2;
    }
  }

  .footer-button {
    margin-top: 160rpx;
  }
</style>
